りあクト！TypeScript で始めるつらくない React 開発 第 3.1 版【Ⅰ. 言語・環境編】
https://booth.pximg.net/c/620x620/a6bb6149-3c80-4a32-af82-d43ef5505047/i/2368045/2ab8cb19-fd7a-4c3c-8bc8-f8b201393bfc_base_resized.jpg
version manager
nvm
nodenv
anyenv経由で他の言語もまとめて管理できる
code:zsh
$ brew install anyenv
$ echo 'eval "$(anyenv init -)"' >> ~/.zshrc
$ exec $SHELL -l
$ anyenv install --init
$ anyenv install nodenv
$ exec $SHELL -l
plugin install
code:zsh
$ mkdir -p $(anyenv root)/plugins
$ mkdir -p "$(nodenv root)"/plugins
$ touch $(nodenv root)/default-packages
% nodeenv global 14.4.0 とした kanekou.icon
Nodeをupdateする前ははanyenv updateを実行する．
インストール可能なリストが更新される
Fabebook製の改良版npmコマンド
npmより高速
サブコマンドのタイピング数が少ない
.help :コマンド一覧
.load:指定したファイル内容を現在のセッションに読み込む
よく使うから便利らしい
おすすめVS Code拡張リスト(未インストール)
stylelint
インストールしてみたkanekou.icon
Visual Studio IntelliCode
API サジェスト一覧の精度を向上
Import Cost
モジュールインポート時に算出したバンドルサイズを表示
Debugger for Chrome
インストールしてみたkanekou.icon
大量のソースコードファイルを一つにまとめ，最適化
ファイル変更を検知し，自動ロード
ユニットテストの記述
一回限りのコマンドにうってつけ
ローカルになければ最新版をネットからダウンロード
実行後，パッケージを削除
yarn upgrade-interactive [--latest]
pagege.jsonの情報に従い，パッケージの更新情報をチェックし，対話形式で一括アップデート
実行後の動作は保証されない
--latest: 強制的に最新の安定版verに一括アップデート
yarn testコマンド
起動したままにすると，差分を自動検知しテストが実行される
yarn eject
react-scriptsの庇護から抜け出す
webkackの設定をいじれる
DSLをBabelにコンパイルさせることができる
一度実行すると元に戻せない
茨の道
ドメイン固有言語
特定分野のタスク向けに設計されたコンピュータ言語
正規表現，SQLなど
プリミティブ値が格納された「undefinded」という名前のグローバル変数
ややこしいkanekou.icon
JSのオブジェクト
狭義
連想配列
json
広義
プリミティブ値でないもの
Objectという標準組み込みオブジェクトを最終的な継承元に持つ
関数宣言
プロトタイプベース
オブジェクトの抽象としてのクラスが存在しない
オブジェクトは直接，他のオブジェクトを継承する
継承元のオブジェクトをプロトタイプと呼ぶ
JSでは分割代入を積極的に使った方が良い
オブジェクトのコピー
シャローコピー
基本これで良い
オブジェクトの場合，参照がコピーされる
code:js
const original={a:1,b:2,c:3};
const copy = { ...original };
ネストが深い場合，どうすればいいか
一旦JSONにパースする
Dateオブジェクトや関数，undefindがある場合，うまくいかない
LodashというライブラリのcloneDeep()を使う
rfdcというライブラリを使う
code:cpp
const hello = undefined || null || 0 || NaN || '' || 'Hello!';
ヌリッシュ・コアレッシング
基本的にグローバルオブジェクト
メソッドでない関数
new演算子を付けずに実行される関数
実行コンテキストのオブジェクトが引数thisとしてメソッド，関数へと暗黙的に渡される
code:js
function(this, arg){}
呼び出し側から任意のオブジェクトに指定して関数を実行する必要がある
call()
apply()
call()またはapply()が使われない時
this
実行コンテキストのオブジェクトを示す
問題点
意図せずグローバルオブジェクトを参照してしまう可能性
code:js
function() {
console.log(this.name, this);
}
対処法
thisはclass構文内のみで使う
暗黙の引数としてのthisを持たない
thisを参照すると関数外のスコープのthisが使われる
new演算子
1. prototypeオブジェクトをコピーして新規にオブジェクトを作成
2. 関数に暗黙の引数thisとして渡す
3. 関数がreturn thisで終わってない場合，それを実行
globalThis
グローバルオブジェクト参照
モジュールシステムの一つ
静的解析を念頭に設計
同期，及び非同期のローディング双方のサポート
import, export文が簡潔
モダンブラウザのほとんどが対応ずみ
つまりブラウザで実行可能
JSだけでなく，様々な形式のファイル依存関係を検出してまとめる
デフォルトはJSのみサポート
拡張モジュールにより，画像，JSON，CSSなども扱える
異なるモジュール構文が入り混じっていても適切に依存関係を解決できる
可変性
不変性
式を組み合わせてプログラムを構成
パラダイム
無名関数の定義
変数に関数を代入可能
高階関数
関数の引数，戻り値に関数が使える
部分適応
カリー化された関数の一部の引数を固定し，新たな関数を生成
複数の引数 を取る関数を、より少ない引数を取る関数に分割して入れ子にすること
高階関数を使った書き方
関数合成
第一引数が第二引数より優先度が高い場合，-1を返す
第一引数が第二引数より優先度が低い場合，1を返す
第一引数と第二引数の優先度が同じ場合，0を返す
sort()
非破壊的に使いたい場合，slice()を挟む
関数定義時に決定され，固定される
関数と，その関数が作られた環境が一体となったオブジェクト
型アノテーション
型を定義する
オブジェクトの方に名前を付けられる
プロパティ
readonly修飾子
書き換え不能になる
末尾に?
省略可能となる
任意のキーのプロパティ値を定義
文字列と数値の型のみ使える
文字列リテラル型を列挙型の代わりに使う
オーバーロードができない
以下の制約がある配列の型
個々の要素の型
順番
様子数
使われる場面
関数の引数の型によく使う
API関数の戻り値に異なる値を設定する
分割代入で必要な値だけ抽出
何でもOKな型
あんまよくなさそうkanekou.icon
何でもOKな型
型ガードを用いて型安全を保証させながらコンパイルを通す 何も代入できない型
使い方
neverを使ったcase文漏れのテクニック
すごい! kanekou.icon
常に例外を投げる
無限ループの戻り値
任意の型を<>によって引数として渡す
型推論によって抽象化する
再利用性を向上
型安全を維持
code:js
const toArray = <T>(arg1: T, arg2: T): T[] => arg1, arg2; undefined
toArray(8, 3);
toArray('foo', 'bar');
toArray(5, 'bar')
eval.ts:4:12 - error TS2345: Argument of type 'string' is not assignable to parameter of type 'number'. クラス
public
自クラス，子クラス，インスタンスからアクセス可能
protected
自クラス，子クラスからアクセス可能
インスタンスからアクセス不可
private
自クラスのみからアクセス可能
子クラス，インスタンスからアクセス不可
型でもあり，関数でもある
クラス定義時，2つの宣言を同時に行う
インターフェース型宣言
コンストラクタ関数宣言
型エイリアス
任意の方に別名を与えて再利用できる
インターフェースよりこっちを使うべき
保守性の高いコードが書ける
容易に拡張できてしまう
マップ型，条件付き型などが記述できない
非 Null アサーション演算子
!
Nullもundefinedも入らない，とコンパイラを黙らせる
よほどの保証がない限り使わない
as const
定数としての型注釈を付与
テンプレートリテラル型
テンプレートリテラルによる文字列を型として扱うことができる
タイポに強力だ kanekou.icon
inferと組み合わせることにより，文字列のパターンマッチができる infer: 中身の型を取得できる
組み込みユーティリティ型
Partical<T>: Tのプロパティを全て省略可能
Required<T>: Tのプロパティを全て必須
Readonly<T>: Tのプロパティを全て読み取り専用
Pick<T,K>: TからKが指定するキーのプロパティのみ抽出
Omit<T,K>: TからKが指定するプロパティを省く
Extract<T,U>: TからUの要素のみ抽出
Exclude<T,U>: TからUの要素を省く
NonNullable<T>: Tからnullとundefinedを省く
Record<K,T>: Kのようをキー，プロパティ値の方をTとしてオブジェクトの型を生成
Parameters<T>: Tの引数の型を抽出し，タプル型で返す
ReturnType<T>: Tの戻り値の型を返す
Uppercase<T>: Tの各要素の文字列を全て大文字
Lowercase<T>: Tの各要素の文字列を全て小文字
Capitalize<T>:Tの各要素の文字列の頭を大文字
Uncapitalize<T>: Tの各要素の文字列の頭を小文字
オーバーロード
あまり理解できてない．リスト97は，jsで関数が上書きされた時の挙動と何が違うんだ．p198 kanekou.icon
transform();でvoid返されるべきじゃないのかな? kanekou.icon
型アサーション
型がわからない値をTS扱う場合に使う
開発者が型を断定し，コンパイラに押し付ける
型が動作に’適応してなかったらエラーはく
まず型ガードを使うべき
スコープ内で型を保証するチェックを行う
typeof
instanceof
ユーザー定義の型ガード
型述語を用いる
arg is Userのとき，関数がtrueならargはUserである．
export , import
変数，関数，型で同一の名前を持てる
tsは名前空間として変数宣言空間，型宣言空間が存在するため
JavaScript モジュールを TypeScript から読み込む
アンビエンド宣言
既存のJSモジュールに型情報を付加する宣言